<template>
  <div v-if="list.attr" class="personal">
    <van-cell title="头像" is-link size="large" center>
      <template #right-icon>
        <img :src="list.avatar" class="image" />
        <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell
      title="昵称"
      is-link
      :value="list.nickname"
      @click="gotonickname(list.nickname)"
    />
    <van-cell title="手机号" is-link :value="list.mobile" />
    <van-cell
      title="性别"
      is-link
      :value="list.sex ? '女' : '男'"
      @click="gotosex(list.sex)"
    />
    <van-cell
      title="出生日期"
      is-link
      :value="list.birthday"
      @click="show = !show"
    />
    <van-cell
      title="所在城市"
      is-link
      :value="
        list.province_name + '-' + list.city_name + '-' + list.district_name
      "
      @click="area = !area"
    />
    <van-cell title="学科" is-link to="/subject" :value="xueke" />
    <!-- <div class="cells" @click="gotosubject">
      <p>学科</p>
      <div>
        <span v-for="(res, index) in list.attr" :key="index">{{
          res.attr_value
        }}</span>
        <van-icon name="arrow" />
      </div>
    </div> -->
    <van-cell title="年级" is-link :value="nianji" @click="attrs = !attrs" />
    <!-- 时间 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '35%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="sj"
        @cancel="show = !show"
      />
    </van-popup>
    <!-- 省市区 -->
    <van-popup v-model="area" position="bottom" :style="{ height: '40%' }">
      <van-area
        title="标题"
        :area-list="areaList"
        @confirm="dizhi"
        @cancel="area = !area"
      />
    </van-popup>
    <!-- 年级 -->
    <van-popup v-model="attrs" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="attrs = !attrs"
        @confirm="onConfirm"
      />
      <!--    @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange" -->
    </van-popup>
  </div>
</template>
<script>
import { Toast } from "vant";
import Area from "../../../public/Area";
export default {
  data() {
    return {
      minDate: new Date(1901, 2, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      areaList: {
        city_list: Area.city_list,
        county_list: Area.county_list,
        province_list: Area.province_list,
      },
      attrs: false,
      area: false,
      show: false,
      showPicker: false,
      list: [],
      columns: [],
      xueke: "",
      nianji: "",
    };
  },
  mounted() {
    this.getuserInfo();
    this.getattribute();
  },
  methods: {
    getuserInfo() {
      this.$API.userInfo().then((res) => {
        // console.log(res);
        this.list = res.data.data;
        this.list.attr.forEach((item) => {
        //   console.log(item);
          if (item.attr == "学科") {
            this.xueke += item.attr_value + " ";
          } else if (item.attr == "年级") {
            this.nianji += item.attr_value;
          }
        });
        // console.log(this.xueke);
      });
    },
    gotonickname(nickname) {
      this.$router.push({ path: "/nickname", query: { nickname: nickname } });
    },
    gotosex(sex) {
      this.$router.push({ path: "/sex", query: { sex: sex } });
    },
    sj(e) {
      console.log(e);
      let year = e.getFullYear();
      let month = e.getMonth() + 1;
      let datee = e.getDate();
      month = month < 10 ? "0" + month : month;
      datee = datee < 10 ? "0" + datee : datee;
      let birthday = year + "-" + month + "-" + datee;
      //   console.log(birthday);
      this.$API.user({ birthday: birthday }).then((res) => {
        // console.log(res);
        Toast.success(res.data.msg);
        this.show = false;
        this.getuserInfo();
      });
    },
    dizhi(e) {
      //   console.log(e);
      let city_id = e[0].code;
      let district_id = e[2].code;
      let province_id = e[1].code;
      this.$API
        .user({ city_id: city_id, district_id: district_id, province_id })
        .then((res) => {
          Toast.success(res.data.msg);
          this.area = false;
          this.getuserInfo();
        });
    },
    getattribute() {
      this.$API.attribute().then((res) => {
        this.columns = res.data.data[0].value;
        this.columns = this.columns.map((item) => {
          return { text: item.name, id: item.id };
        });
      });
    },
    onConfirm(e) {
    //   console.log(e);
      let user_attr = [{ attr_id: 1, attr_val_id: e.id }];
      user_attr=JSON.stringify(user_attr)
      this.$API.user({ user_attr: user_attr }).then((res) => {
        // console.log(res);
        this.attrs = false;
        this.getuserInfo();
        this.nianji=''
      });
    },
  },
};
</script>
<style lang="scss">
.personal {
  width: 100%;
  img {
    width: 1rem;
  }
}
.cells {
  font-size: 0.4rem;
  display: flex;
  padding: 10px 0.4rem;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  span {
    margin: 0px 6px;
    color: #969799;
  }
}
</style>